<template>
  <div>
    <div class="top t-c"> 
      <div>个人中心</div>
      <div class="user flex f-b">
        <img src="~assets/img/user.png" alt="">
        <div class="right flex f-b">
          <div>
          <div>登录 / 注册</div>
          <div class="bang">暂无绑定手机号</div></div>
          <div class="flex a-c">></div>
        </div>
      </div>
    </div>
    <div class="info flex f-b t-c">
      <div>
        <div><span class="sp">0.00</span>元</div>
        <div>我的余额</div>
      </div>
      <div class="su"></div>
      <div>
        <div><span class="sp">0</span>个</div>
        <div>我的优惠</div>
      </div>
      <div class="su"></div>
      <div>
        <div><span class="sp">0</span>分</div>
        <div>我的积分</div>
      </div>
    </div>
    <div class="tab">
      <div>我的消息</div>
      <div>积分商城</div>
      <div>会员卡</div>
    </div>
    <div class="bottom">
      <div>我的购物车</div>
      <div>下载购物App</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.top{
  background-color: #fc869a;
  font-size: 22px;
  color: #fff;
  padding: 15px;
}
.user>img{
  width: 55px;
  height: 60px;
  border-radius: 50%;
}
.user{
  margin-top: 20px;
}
.right{
  text-align: left;
  padding: 0 15px;
  flex: auto;
}
.bang{
  font-size: 17px;
}
.info{
  background-color: #ddd;
  padding-bottom:12px ;
}
.info>div{
  flex: auto;
  background-color: #eee;
  padding: 15px 0 10px 0;
}
.sp{
  font-size: 25px;
  color: #ff3c5d;
}
div.su{
  flex: 0.05;
  background-color: #ddd;
}
.tab{
  background-color: #ddd;
  padding-bottom: 12px;
}
.tab>div,.bottom>div{
  background-color: #eee;
  margin: 1px 0;
  font-size: 18px;
  padding: 10px 15px;
}
.bottom{
  background-color: #ddd;
}
</style>